<template>
  <div>
    <div>
      <header id="site-header" class="w3l-header fixed-top">
        <!--/nav-->
        <div style="border-bottom: solid rgb(226, 223, 223)">
          <nav
            class="navbar navbar-expand-lg navbar-light fill px-lg-0 py-0 px-3"
          >
            <div class="container" style="min-width: 1600px">
              <h1>
                <a class="navbar-brand"  type="primary" @click="toPage(0)">
                  <img
                    src="\public\favicon.jpg"
                    alt="logo"
                    title="logo"
                    style="height: 60px ;margin-left:15px"
                  />
                </a>
                <a-input-search
                v-model:value="value"
                placeholder="input search text"
                style="width: 500px ;margin-top: 10px"
                @search="onSearch"
              />
              </h1>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                  <!-- class="active"可以使文字变蓝 -->
                                    <li class="nav-item">
                    <a class="nav-link" type="primary" @click="toPage(7)"
                      >首页</a
                    >
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" type="primary" @click="toPage(5)"
                      >行业周报</a
                    >
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" type="primary" @click="toPage(6)"
                        >发布项目</a
                      >
                    </li>
                  <li class="nav-item">
                    <a class="nav-link" type="primary" @click="toPage(0)"
                      >创业信息</a
                    >
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" type="primary" @click="toPage(1)"
                      >积分交易</a
                    >
                  </li>
                  <li class="nav-item">
                    <!-- <a class="nav-link" type="primary" @click="showModal()"
                      >发布项目</a
                    > -->
                    <a-modal
                      v-model:visible="visible"
                      title="发布项目"
                      @ok="handleOk"
                    >
                      <template #footer>
                        <a-button key="back" @click="handleCancel"
                          >返回</a-button
                        >
                        <a-button
                          key="submit1"
                          type="primary"
                          @click="handleCochainOk"
                          >上链</a-button
                        >
                        <a-button
                          key="submit"
                          type="primary"
                          :loading="loading1"
                          @click="handleOk"
                          >发布</a-button
                        >
                      </template>
                      <a-row>
                        <a-col :span="6"> </a-col>
                        <a-col :span="10">
                          <a-upload
                            v-model:file-list="fileList"
                            name="avatar"
                            list-type="picture-card"
                            class="avatar-uploader"
                            :show-upload-list="false"
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            :before-upload="beforeUpload"
                            @change="handleChange"
                          >
                            <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                            <div v-else>
                              <loading-outlined
                                v-if="loading"
                              ></loading-outlined>
                              <plus-outlined v-else></plus-outlined>
                              <div class="ant-upload-text">上传项目图片</div>
                            </div>
                          </a-upload>
                        </a-col>
                      </a-row>
                      <a-row
                        ><a-col :span="24">
                          <a-form
                            :model="formState"
                            :label-col="{ offset: 2, span: 4 }"
                            :wrapper-col="{ span: 16 }"
                          >
                            <a-form-item label="项目标题">
                              <a-input v-model:value="formState.name" />
                            </a-form-item>
                            <a-form-item label="市场介绍" name="desc">
                              <a-textarea v-model:value="formState.desc" />
                            </a-form-item>
                            <a-form-item label="技术文档" name="desc">
                              <a-textarea v-model:value="formState.desc" />
                            </a-form-item>
                            <a-form-item label="图片文档" name="desc">
                              <a-textarea v-model:value="formState.desc" />
                            </a-form-item> </a-form></a-col
                      ></a-row>
                    </a-modal>
                  </li>

                  <li class="nav-item">
                    <a
                      class="nav-link"
                      type="primary"
                      @click="toPage(2)"
                      v-show="!isLogin"
                      >登录</a
                    >
                  </li>
                  <li class="nav-item">
                    <a
                      class="nav-link"
                      type="primary"
                      @click="toPage(3)"
                      v-show="!isLogin"
                      >注册</a
                    >
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" type="primary" @click="toPage(4)"
                      >我的项目</a
                    >
                  </li>
                  <li class="nav-item">
                    <!-- 设置上传头像 -->
                    <div v-show="isLogin">
                      <div class="curr-manager">
                        <a-avatar
                          v-if="currImageUrl"
                          @click="setAvatar"
                          :src="currImageUrl"
                        />
                        <!-- <span
                      v-else
                      @click="setAvatar"
                      style="
                        font-size: 18px;
                        color: #6495ED;
                        "
                    >设置头像</span> -->
                        <a-avatar :src="user.avatar" />
                        <a-dropdown placement="bottomCenter">
                          <a
                            style="
                              color: #000;
                              margin-left: 20px;
                              font-size: 18px;
                            "
                            @click.prevent
                          >
                            欢迎你,{{ user.userName }}
                            <DownOutlined />
                          </a>
                          <template #overlay>
                            <a-menu>
                              <a-menu-item>
                                <a class="menu-item" @click="showPersonalModal"
                                  >个人信息</a
                                >
                                <a-modal
                                  v-model:visible="PersonalVisible"
                                  title="个人信息"
                                  @ok="handlePersonalOk"
                                >
                                  <a-row>
                                    <a-col :span="12">
                                      <a-typography-title :level="5"
                                        >头像</a-typography-title
                                      >
                                      <a-image
                                        :width="140"
                                        src="\src\assets\image\touxiang.jpeg"
                                      />
                                    </a-col>
                                    <a-col :span="12">
                                      <a-typography-title :level="5"
                                        >个人评分</a-typography-title
                                      >
                                      <a-image
                                        style="m"
                                        :width="200"
                                        src="https://s3.bmp.ovh/imgs/2021/11/090efb731e1afdd6.png"
                                      />
                                    </a-col>
                                  </a-row>
                                  <a-typography-title :level="5"
                                    >个人信息</a-typography-title
                                  >
                                  <a-list
                                    size="large"
                                    bordered
                                    :data-source="user"
                                  >
                                    <template #renderItem="{ item }">
                                      <a-list-item>{{ item }}</a-list-item>
                                    </template>
                                  </a-list>
                                </a-modal>
                              </a-menu-item>
                              <a-menu-item>
                                <a class="menu-item" @click="toPage(2)"
                                  >退出登录</a
                                >
                              </a-menu-item>
                            </a-menu>
                          </template>
                        </a-dropdown>

                        <!-- 设置头像弹框 -->
                        <a-modal
                          v-model:visible="visible1"
                          title="设置头像"
                          @ok="execUpload"
                        >
                          <a-upload
                            list-type="picture-card"
                            class="avatar-uploader"
                            :show-upload-list="false"
                            :before-upload="() => false"
                            @change="handleChange"
                          >
                            <img v-if="imageUrl" :src="imageUrl" />
                            <div v-else>
                              <plus-outlined />
                              <!-- <div class="ant-upload-text">选择头像</div> -->
                            </div>
                          </a-upload>
                        </a-modal>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <!-- 模式转换 -->
            </div>
          </nav>
        </div>
        <!-- 导航栏 -->
      </header>
    </div>
    <div style="margin-top: 70px">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import { defineComponent, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  get,
  del,
  post,
  getBlob,
  tip,
  removeLocalToken,
  getLocalToken,
} from "@/common";
import {
  LoadingOutlined,
  DownOutlined,
  UserOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default defineComponent({
  components: {
    DownOutlined,
    UserOutlined,
    LoadingOutlined,
    PlusOutlined,
  },

  setup() {
    const router = useRouter();
    const isLogin = ref(false);

    // 个人信息
    const PersonalVisible = ref(false);
    const showPersonalModal = () => {
      PersonalVisible.value = true;
    };

    const handlePersonalOk = (e) => {
      PersonalVisible.value = false;
    };

    const pathes = [
      "/home/index",
      "/home/integral_trading",
      "/login",
      "/register",
      "/home/myProject",
      "/home/industryWeek",
      "/home/project",
      "/home/index"
    ];

    const toPage = (temp_index) => {
      router.push({ path: pathes[temp_index] });
    };
    toPage(0);

    // 图片上传
    const loading = ref(false);
    const fileList = ref([]);
    const imageUrl = ref("");

    const handleChange = (info) => {
      if (info.file.status === "uploading") {
        loading.value = true;
        return;
      }

      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (base64Url) => {
          imageUrl.value = base64Url;
          loading.value = false;
        });
      }

      if (info.file.status === "error") {
        loading.value = false;
        message.error("upload error");
      }
    };

    const beforeUpload = (file) => {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";

      if (!isJpgOrPng) {
        message.error("You can only upload JPG file!");
      }

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        message.error("Image must smaller than 2MB!");
      }

      return isJpgOrPng && isLt2M;
    };

    // 发布项目
    const loading1 = ref(false);
    const visible = ref(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = () => {
      loading1.value = true;
      setTimeout(() => {
        loading1.value = false;
        visible.value = false;
      }, 2000);
    };

    const handleCancel = () => {
      visible.value = false;
    };
    const formState = reactive({
      title: "",
      marketIntroduction: "",
      technologyIntroduction: "",
      imageDocument: "",
    });

    const handleCochainOk = () => {};
    // 个人信息
    const user = ref({
      userId: "",
      userName: "",
      avater: "",
    });
    // 当前信息
    const getCurrnetUser = () => {
      get("/security/home/currentUser").then((res) => {
        console.log(res);
        user.value = res.data;
        isLogin.value = true;
      });
    };
    getCurrnetUser();
    return {
      user,
      getCurrnetUser,
      handleCochainOk,
      loading1,
      loading,
      visible,
      showModal,
      handleOk,
      handleCancel,
      PersonalVisible,
      showPersonalModal,
      handlePersonalOk,
      router,
      isLogin,
      formState,
      pathes,
      toPage,
      fileList,
      imageUrl,
      handleChange,
      beforeUpload,
    };
  },
});
</script>

<style>
@import "/src/css/cinema.css";
@import "/src/css/style-starter.css";
@import "/src/css/base.css";
@import "/src/css/bootstrap-grid.css";

/* 上传图片样式 */
.avatar-uploader > .ant-upload {
  width: 150px;
  height: 150px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

</style>